<template>
<div id="out12">
    <div id="top2">
			<img id="imgTop1" src="../assets/img/gerenzhongxin/1gerenzhongxin/youjian.png" alt=""/>
			<span>个人中心</span>
			<img id="imgTop3" src="../assets/img/gerenzhongxin/1gerenzhongxin/xinxi.png" alt=""/>
			<img id="imgTop2" src="../assets/img/gerenzhongxin/1gerenzhongxin/shezhi.png" alt=""/>
	</div>
	<div class="back"></div>
	<div class="titttt">
		<a href="#/GeRenxx">
		<p>
			<div></div>
			<span class="namee">昵称</span>
		</p>
		</a>
		<p>
			<span class="zhanghu"><a href="#/MyZhanghu">账户提现</a></span>
		</p>
	</div>
	<div class="myD">
		我的订单
		<span>查看所有订单</span>
		<img src="../assets/img/fenlei/more.png" alt=""/>
	</div>
	<div class="titT">
		<a href="#/DauZhifu">
			<img src="../assets/img/gerenzhongxin/1gerenzhongxin/daizhifu.png" alt=""/>
			待支付
		</a>
		<a href="#/DaiFahuo">
			<img src="../assets/img/gerenzhongxin/1gerenzhongxin/feiji.png" alt=""/>
			待发货
		</a>
		<a href="#/DaiShouhuo">
			<img src="../assets/img/gerenzhongxin/1gerenzhongxin/daifahuo.png" alt=""/>
			待收货
		</a>
		<a href="#/JiaoYiwan">
			<img src="../assets/img/gerenzhongxin/1gerenzhongxin/jiaoyiwancheng.png" alt=""/>
			交易完成
		</a>
	</div>
	<ul class="myFan">
		<li class="title1">
			我的返金排号
			<span>
				查看更多
				<img src="../assets/img/gouwuche/down.png" alt=""/>
			</span>
		</li>
		<li>
			<span>2017/06/26</span>
			<span>消费：￥100</span>
			<span>排号：10</span>
		</li>
		<li>
			<span>2017/06/26</span>
			<span>消费：￥100</span>
			<span>排号：10</span>
		</li>
		<li>
			<span>2017/06/26</span>
			<span>消费：￥100</span>
			<span>排号：10</span>
		</li>
		<li>
			<span>2017/06/26</span>
			<span>消费：￥100</span>
			<span>排号：10</span>
		</li>
	</ul>
	<ul class="bottom5">
		<li>
			<span>
				<span>0</span>
				我的圣灯值
			</span>
			<span>
				<span>0</span>
				我的积分
			</span>
			<span>
				<span>0</span>
				我的优惠卷
			</span>
			<span>
				<span>0</span>
				我的心得
			</span>
		</li>
		<li>
			<span>
				<img src="../assets/img/gerenzhongxin/2kefuyufankui/shimingrenzheng.png" alt=""/>
				实名认证
			</span>
			<span>
				<img src="../assets/img/gerenzhongxin/1gerenzhongxin/shouhuodizhi.png" alt=""/>
				收货地址
			</span>
			<span>
				<img src="../assets/img/gerenzhongxin/1gerenzhongxin/guanzhugongzhonghao.png" alt=""/>
				关注公众号
			</span>
			<a href="#/KefuFankui">
				<img src="../assets/img/gerenzhongxin/1gerenzhongxin/kefuyufankui.png" alt=""/>
				客服与反馈
			</a>
		</li>
	</ul>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out12 a{
		color: #000000;
		text-decoration: none;
	}
	#out12 .zhanghu a{
		color: #FFFFFF;
	}
	#out12{
		background: #f2f2f2;
		height: 100vh;
		overflow: scroll;
	}
	#out12>.back{
		height: 9.6rem;
	}
	#out12>#top2 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		align-items: center;
		text-align: center;
		justify-content: space-around;
		position: fixed;
		z-index: 10;
		padding-left: 3rem;
		box-sizing: border-box;
	}
	
	#out12 #imgTop1 {
		width: 3.6rem;
		height: 3.6rem;
	}
	
	#out12 #top2>span {
		width: 50rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		letter-spacing: 0px;
		text-align: right;
		box-sizing: border-box;
		text-align: center;
		padding-left: 3rem;
	}
	#out12 #imgTop2 {
		width: 3.6rem;
		height: 3.5rem;
	}
	#out12 #imgTop3{
		width: 3.6rem;
	    height: 3.4rem;
	}
	#out12>.titttt{
		height: 22rem;
		background-color: #fee3e3;
		box-sizing: border-box;
		padding: 4rem 0;
		padding-left: 2rem;
		padding-right: 4rem;
		position: relative;
	}
	#out12>.titttt .namee{
		position: absolute;
		top: 8rem;
		left: 14rem;
		font-size: 3rem;
	}
	#out12>.titttt>p{
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 3rem;
	}
	#out12>.titttt div{
		width: 10rem;
		height: 10rem;
		background: #e38e8e;
		border-radius: 50%;
	}
	#out12>.titttt>p>span{
		width: 14rem;
		height: 4rem;
		background-color: #d26060;
		border-radius: 2rem;
		text-align: center;
		line-height: 4rem;
		color: #FFFFFF;
		transform: translateX(25rem);
	}
	#out12>.myD{
		height: 8rem;
		background-color: #ffffff;
		box-shadow: 0 0.1rem 0 0
		#cccccc;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 3rem;
	}
	#out12>.myD>span{
		font-size: 2.4rem;
		width: 45rem;
		transform: translateX(3rem);
		text-align: right;
		color: #666666;
	}
	#out12>.myD>img{
		width: 1rem;
		height: 1.8rem;
	}
	#out12>.titT{
		height: 10rem;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	#out12>.titT>span{
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		font-size: 2.4rem;
	}
	#out12>.titT>a{
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		font-size: 2.4rem;
	}
	#out12>.titT>span>img{
		width: 3rem;
		height: 3rem;
		margin-bottom: 1.5rem;
	}
	#out12>.titT>a>img{
		width: 3rem;
		height: 3rem;
		margin-bottom: 1.5rem;
	}
	#out12>.myFan{
		background: #FFFFFF;
		margin-top: 2rem;
	}
	#out12>.myFan>li{
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 8rem;
		border-bottom: 0.1rem solid #CCCCCC;
		font-size: 2.8rem;
	}
	#out12>.myFan>.title1{
		font-size: 3rem;
	}
	#out12>.myFan>.title1>span{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 45rem;
		font-size: 2.4rem;
		color: #666666;
	}
	#out12>.myFan>.title1>span>img{
		width: 1.8rem;
		height: 1rem;
		margin-left: 1rem;
	}
	#out12>.bottom5{
		margin-top: 2rem;
		margin-bottom: 20rem;
	}
	#out12>.bottom5>li{
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 12rem;
		background: #FFFFFF;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	#out12>.bottom5>li>span{
		width: 18rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		font-size: 2.4rem;
	}
	#out12>.bottom5>li>span>span{
		color: #FF0000;
		font-size: 3rem;
		margin-bottom: 2rem;
	}
	#out12>.bottom5>li>span>img{
		width: 5rem;
		height: 4rem;
		margin-bottom: 2rem;
	}
	#out12>.bottom5>li>a{
		width: 18rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
		font-size: 2.4rem;
	}
	#out12>.bottom5>li>a>img{
		width: 5rem;
		height: 4rem;
		margin-bottom: 2rem;
	}
</style>